<script lang="ts" setup>
import 'vue-cropper/dist/index.css'
import { ref, watch, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/request/http'
import { VueCropper } from 'vue-cropper'
import { Scrollbar, Virtual, Mousewheel } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/scrollbar'
import 'swiper/css/mousewheel'
import 'swiper/css/virtual'

const swiperRef = ref()
const modules = [Scrollbar, Virtual, Mousewheel]

// 裁剪组件需要使用到的参数
const options = ref({
  mode: 'contain',
  canMove: true,
  size: 1,
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'png', // 裁剪生成图片的格式
  canScale: false, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
  full: true, // 是否输出原图比例的截图
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
})

const cropperRefs = ref<any[]>([])
const getRefs = (el: any, index: number) => {
  cropperRefs.value[index] = el
}
// 入参
const props = defineProps<{
  currentIndex: number
  wjxqxxList: any
  ajxqLabel: string
}>()
const emit = defineEmits(['indexChange'])

watch(
  () => props.currentIndex,
  (val: any) => {
    nextTick(() => {
      swiperRef.value.slideTo(val)
    })
  },
  { immediate: true },
)

// 放大操作
const enlargeClick = () => {
  cropperRefs.value[props.currentIndex].changeScale(10)
}
// 缩小操作
const narrowClick = () => {
  cropperRefs.value[props.currentIndex].changeScale(-10)
}

// 上一页
const lastPageClick = () => {
  // 第一页终止
  if (props.currentIndex === 0) {
    ElMessage.warning('当前已是第一页')
    return
  }
  swiperRef.value.slidePrev()
}

const nextPageClick = () => {
  // 最后一页终止
  if (props.currentIndex + 1 === props.wjxqxxList.length) {
    ElMessage.warning('当前已是最后一页')
    return
  }
  swiperRef.value.slideNext()
}

const mode = ref('contain')
const changeMode = (val: string) => {
  options.value.mode = val
}
const onSwiper = (swiper: any) => {
  swiperRef.value = swiper
}
const onSlideChange = (swiper: any) => {
  emit('indexChange', swiper.activeIndex)
}
</script>

<template>
  <div class="scroll-ws">
    <div class="top">
      <div class="topLeft">
        <img src="@/assets/images/yjqqs.png" alt="" />
        <p>{{ ajxqLabel }}</p>
      </div>
      <div class="button-group">
        <div class="zoom-in" title="放大" @click="enlargeClick"></div>
        <div class="zoom-out-disabled" title="缩小" @click="narrowClick"></div>
        <el-select class="select-mode" v-model="mode" @change="changeMode">
          <el-option label="适合页面" value="contain"></el-option>
          <el-option label="适合页宽" value="100% auto"></el-option>
        </el-select>
        <div class="prev-btn" @click="lastPageClick()" title="上一页"></div>
        <div class="next-btn" title="下一页" @click="nextPageClick()"></div>
      </div>
      <div class="topRight">
        <!-- <el-input placeholder="请输入查询关键字" suffix-icon="Search" /> -->
      </div>
    </div>
    <div class="preview-box">
      <div class="page-num" v-if="wjxqxxList.length > 0">
        {{ currentIndex + 1 }}/{{ wjxqxxList.length }}
      </div>
      <swiper
        direction="vertical"
        :modules="modules"
        :scrollbar="{ draggable: true }"
        virtual
        mousewheel
        :allowTouchMove="false"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(item, index) in wjxqxxList"
          style="width: 100%; height: 100%"
          :key="item.wjbh"
        >
          <vueCropper
            :ref="(el:any) => getRefs(el, index)"
            :img="`${axios.defaults.baseURL}/fpi/wjfw/download?wjbh=${item.jpgwjxh}`"
            :mode="options.mode"
            :canScale="options.canScale"
            :canMove="options.canMove"
            :full="options.full"
            :outputSize="options.size"
            :outputType="options.outputType"
            style="background-image: none"
          ></vueCropper>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.scroll-ws {
  width: 100%;
  height: 100%;
  background-color: #f7f8f9;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dae4f1;
    padding-bottom: 5px;
    margin-bottom: 5px;
    .topLeft {
      display: flex;

      img {
        padding-right: 5px;
      }
      p {
        font-weight: 600;
      }
    }
    .button-group {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > div:not(.select-mode) {
        margin-bottom: 7px;
      }
      .select-mode {
        width: 110px;
        :deep(.el-select__wrapper) {
          height: 28px;
          min-height: 28px;
        }
      }
    }
  }
}

.preview-box {
  position: relative;
  height: calc(100% - 40px);
  .page-num {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
  }
  .swiper {
    width: 100%;
    height: 100%;
    :deep(.swiper-scrollbar) {
      width: 6px;
      .swiper-scrollbar-drag {
        min-height: 10px;
      }
    }
  }
}
.footer {
  text-align: right;
}
</style>
